//index.js
//获取应用实例
import {
    playAudio
} from "../../utils/util"

const app = getApp()
var wxDraw = require("../../utils/wxdraw.min.js").wxDraw;
var Shape = require("../../utils/wxdraw.min.js").Shape;
var AnimationFrame = require("../../utils/wxdraw.min.js").AnimationFrame;

Page({
    data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        wxCanvas: null,
        desc: "宝贝生日快乐呀",
        date: "2020.05.21"

    },
    //事件处理函数
    bindViewTap: function () {
        wx.navigateTo({
            url: '../logs/logs'
        })
    },
    bindtouchstart: function (e) {
        // 检测手指点击事件
        // console.log(e);
        this.wxCanvas.touchstartDetect(e);

    },
    bindtouchmove: function (e) {
        // 检测手指点击 之后的移动事件
        this.wxCanvas.touchmoveDetect(e);
    },
    bindtouchend: function () {
        //检测手指点击 移出事件
        this.wxCanvas.touchendDetect();
    },
    bindtap: function (e) {
        this.wxCanvas.tapDetect(e);
    },
    bindlongpress: function (e) {
        // console.log(e);
        this.wxCanvas.longpressDetect(e);
    },
    onShareAppMessage() {
        return {
            title: "小猪蹄子生日快乐呀❤2020.05.21",
            imageUrl: "/common/images/share.jpg",
        };
    },
    onLoad: function () {


        if (app.globalData.userInfo) {
            this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
            })
        } else if (this.data.canIUse) {
            // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
            // 所以此处加入 callback 以防止这种情况
            app.userInfoReadyCallback = res => {
                this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                })
            }
        } else {
            // 在没有 open-type=getUserInfo 版本的兼容处理
            wx.getUserInfo({
                success: res => {
                    app.globalData.userInfo = res.userInfo
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    })
                }
            })
        }

        //////////////
        this._initCanvas()

    },

    onUnload: function () {
        this.wxCanvas.clear(); //推荐这个
    },


    //------------------------自定义函数-------------------------------
    getUserInfo: function (e) {
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
            userInfo: e.detail.userInfo,
            hasUserInfo: true
        })
    },

    _initCanvas() {
        var context = wx.createCanvasContext('textA')
        this.wxCanvas = new wxDraw(context, 0, 0, 400, 500);
        let text = new Shape('text', {
            text: "H",
            x: 80,
            y: 260,
            fontSize: 50,
            fillStyle: "#ff5777",
            needShadow: true
        }, 'fill', false)
        let text2 = new Shape('text', {
            text: "a",
            x: 120,
            y: 260,
            fontSize: 50,
            fillStyle: "#ff5777",
            needShadow: true
        }, 'fill', false)
        let text3 = new Shape('text', {
            text: "p",
            x: 155,
            y: 260,
            fontSize: 50,
            fillStyle: "#ff5777",
            needShadow: true
        }, 'fill', false)
        let text4 = new Shape('text', {
            text: "p",
            x: 190,
            y: 260,
            fontSize: 50,
            fillStyle: "#ff5777",
            needShadow: true
        }, 'fill', false)
        let text5 = new Shape('text', {
            text: "y",
            x: 225,
            y: 260,
            fontSize: 50,
            fillStyle: "#ff5777",
            needShadow: true
        }, 'fill', false)
        this.wxCanvas.add(text);
        this.wxCanvas.add(text2);
        this.wxCanvas.add(text3);
        this.wxCanvas.add(text4);
        this.wxCanvas.add(text5);


        setTimeout(function () {
            text.animate({
                "y": "-=100",
                shadow: {
                    offsetY: 100,
                    blur: 30
                }
            }, {
                easing: "swingTo",
                duration: 1000
            }).animate({
                "y": "+=100",
                shadow: {
                    offsetY: 5,
                    blur: 5
                }
            }, {
                easing: "swingFrom",
                duration: 1000
            }).start(true);
        }, 50);
        setTimeout(function () {
            text2.animate({
                "y": "-=100",
                shadow: {
                    offsetY: 100,
                    blur: 30
                }
            }, {
                easing: "swingTo",
                duration: 1000
            }).animate({
                "y": "+=100",
                shadow: {
                    offsetY: 5,
                    blur: 5
                }
            }, {
                easing: "swingFrom",
                duration: 1000
            }).start(true);
        }, 100);
        setTimeout(function () {
            text3.animate({
                "y": "-=100",
                shadow: {
                    offsetY: 100,
                    blur: 30
                }
            }, {
                easing: "swingTo",
                duration: 1000
            }).animate({
                "y": "+=100",
                shadow: {
                    offsetY: 5,
                    blur: 5
                }
            }, {
                easing: "swingFrom",
                duration: 1000
            }).start(true);
        }, 150);
        setTimeout(function () {
            text4.animate({
                "y": "-=100",
                shadow: {
                    offsetY: 100,
                    blur: 30
                }
            }, {
                easing: "swingTo",
                duration: 1000
            }).animate({
                "y": "+=100",
                shadow: {
                    offsetY: 5,
                    blur: 5
                }
            }, {
                easing: "swingFrom",
                duration: 1000
            }).start(true);
        }, 200);
        setTimeout(function () {
            text5.animate({
                "y": "-=100",
                shadow: {
                    offsetY: 100,
                    blur: 30
                }
            }, {
                easing: "swingTo",
                duration: 1000
            }).animate({
                "y": "+=100",
                shadow: {
                    offsetY: 5,
                    blur: 5
                }
            }, {
                easing: "swingFrom",
                duration: 1000
            }).start(true);
        }, 250);

        /*
                setTimeout(function () {
                    text.animate({"y": "-=100", shadow: {offsetY: 100, blur: 30}}, {
                        easing: "swingTo",
                        duration: 1000
                    }).animate({"y": "+=100", shadow: {offsetY: 5, blur: 5}}, {
                        easing: "swingFrom",
                        duration: 1000
                    }).start(true);
                }, 50);
                setTimeout(function () {
                    text2.animate({"y": "-=100", shadow: {offsetY: 100, blur: 30}}, {
                        easing: "swingTo",
                        duration: 1000
                    }).animate({"y": "+=100", shadow: {offsetY: 5, blur: 5}}, {
                        easing: "swingFrom",
                        duration: 1000
                    }).start(true);
                }, 100);
                setTimeout(function () {
                    text3.animate({"y": "-=100", shadow: {offsetY: 100, blur: 30}}, {
                        easing: "swingTo",
                        duration: 1000
                    }).animate({"y": "+=100", shadow: {offsetY: 5, blur: 5}}, {
                        easing: "swingFrom",
                        duration: 1000
                    }).start(true);
                }, 150);
                setTimeout(function () {
                    text4.animate({"y": "-=100", shadow: {offsetY: 100, blur: 30}}, {
                        easing: "swingTo",
                        duration: 1000
                    }).animate({"y": "+=100", shadow: {offsetY: 5, blur: 5}}, {
                        easing: "swingFrom",
                        duration: 1000
                    }).start(true);
                }, 200);
                setTimeout(function () {
                    text5.animate({"y": "-=100", shadow: {offsetY: 100, blur: 30}}, {
                        easing: "swingTo",
                        duration: 1000
                    }).animate({"y": "+=100", shadow: {offsetY: 5, blur: 5}}, {
                        easing: "swingFrom",
                        duration: 1000
                    }).start(true);
                }, 250);

        */

    }
})